<template>
    <div class="newsinfo-container">
        <h3 class="newsinfo-tit">{{ newsInfo.title }}</h3>
        <div class="newsinfo-subtit">
            <span>发表时间：{{ newsInfo.add_time | dateFormat("YYYY-MM-DD HH:mm:ss") }}</span>
            <span>点击次数：{{ newsInfo.click }}次</span>
        </div>
        <div class="newsinfo-content" v-html="newsInfo.content"></div>

        <comment-sub :id="newsId"></comment-sub>
    </div>
</template>

<script>
import { Toast } from "mint-ui"
import comment from "../subcomponents/comment.vue"

export default {
    data(){
        return {
            newsId: this.$route.params.newsId,    // 将 url 地址中的 newsId，放到 data 上，方便以后调用
            newsInfo:{}  // 新闻详情对象
        }
    },
    created(){
        this.getnewsinfo();
    },
    methods:{
        getnewsinfo(){    // 根据 新闻Id 获取新闻详情数据
            this.$http.get("/api/getnew/" + this.newsId).then((result) => {
                // console.log(result.data);
                if(result.data.status === 0){
                    // 获取成功
                    this.newsInfo = result.data.message[0];
                    console.log(this.newsInfo);

                }else{
                    // 获取失败
                    Toast("获取新闻详情失败");
                }
            });
        }
    },
    // 使用评论子组件 Comment.vue
    components:{
        'comment-sub':comment
    }
}
</script>

<style lang="scss" scoped>
.newsinfo-container{
    .newsinfo-tit{
        font-size: 16px;
        text-align: center;
        margin: 15px 0;
        padding:0 10px;
    }
    .newsinfo-subtit{
        display: flex;
        -webkit-display: flex;
        -moz-display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #26a2ff;
        border-bottom:1px solid #ccc;
        padding:0 10px;
    }
    .newsinfo-content{
        padding:10px;
        text-align: justify;
    }
}
</style>